<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="/style/default/index.css">
  <style>
    .text-delete {
      text-decoration:line-through;
      color:#C9C5C5;
    }

    .text-close {
      color:#C9C5C5;
    }
  </style>
</head>

<body style="background-color:#f8f8f8;">
<div id="app">

  <!--公司信息dialog-->
  <el-dialog title="公司信息" :visible.sync="dialogCompanyVisible" width="50%">
    <div style="height:200px;overflow-y:auto;">
      <el-form ref="companyForm" :model="companyData" :rules="rules" :disabled="dialogCompanyDisabled"
               label-width="120px" size="mini" style="margin-right: 30px;">
        <el-col :span="12">
          <el-form-item label="公司名称" prop="name">
            <el-input v-model="companyData.name"></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="companyData.contacts"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="companyData.address"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机构代码">
            <el-input v-model="companyData.orgcode"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="companyData.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="companyData.email"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogCompanyVisible = false">取 消</el-button>
      <el-button @click="submitEditCompany" type="primary" :disabled="dialogCompanyDisabled">确 定
      </el-button>
    </div>
  </el-dialog>

  <!--部门信息dialog-->
  <el-dialog title="部门信息" :visible.sync="dialogOfficeVisible" width="50%">
    <div style="height:200px;overflow-y:auto;">
      <el-form ref="officeForm" :model="officeData" :rules="rules" :disabled="dialogOfficeDisabled"
               label-width="120px" size="mini" style="margin-right: 30px;">
        <el-col :span="12">
          <el-form-item label="部门名称" prop="name">
            <el-input v-model="officeData.name"></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="officeData.contacts"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="officeData.address"></el-input>
          </el-form-item>
          <el-form-item label="序号(高-低)">
            <el-input-number v-model="officeData.sort" :min="0" :max="9999"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机构代码">
            <el-input v-model="officeData.orgcode"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="officeData.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="officeData.email"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="officeData.status" placeholder="请选择">
              <el-option v-for="item in optionData.status" :key="item.value" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogOfficeVisible = false">取 消</el-button>
      <el-button @click="submitEditOffice" type="primary" :disabled="dialogOfficeDisabled">确 定</el-button>
    </div>
  </el-dialog>

  <!--员工信息dialog-->
  <el-dialog title="员工信息" :visible.sync="dialogMemberVisible" width="50%">
    <div style="height:310px;overflow-y:auto;">
      <el-form ref="memberForm" :model="memberData" :rules="rules" :disabled="dialogMemberDisabled"
               label-width="120px" size="mini" style="margin-right: 30px;">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="memberData.name"></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="memberData.address"></el-input>
          </el-form-item>
          <el-form-item label="序号(高-低)">
            <el-input-number v-model="memberData.sort" :min="0" :max="9999"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="phone" :rules="[{required: true, trigger: 'blur', validator: validPhone}]">
            <el-input v-model="memberData.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="memberData.email"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="memberData.status" placeholder="请选择">
              <el-option v-for="item in optionData.status" :key="item.value" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="权限角色">
            <el-select v-model="memberData.roles" multiple placeholder="请选择(可多选)" style="width:100%">
              <el-option v-for="item in roleData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权限范围">
            <el-select v-model="memberData.roles_scope" placeholder="请选择" >
              <el-option v-for="item in optionData.roles_scope" :key="item.value" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-button style="margin-left: 20px;" type="primary" size="mini" @click="showSelectOfficeDialog" v-show="memberData.roles_scope == 3">选择权限部门</el-button>
        </el-col>
        <el-col :span="24">
          <el-form-item label="授权部门" v-show="memberData.roles_scope == 3">
            <el-tag v-for="item in strToIntArray(memberData.roles_office_list)" size="mini" style="margin: 0px 5px;" >{{orgAllData[item].name}}</el-tag>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogMemberVisible = false">取 消</el-button>
      <el-button @click="resetPassword(memberData.id)" :disabled="dialogMemberDisabled">重置密码</el-button>
      <el-button @click="submitEditMember" type="primary" :disabled="dialogMemberDisabled">确 定</el-button>
    </div>
  </el-dialog>

  <!--员工信息dialog-->
  <el-dialog title="员工信息" :visible.sync="dialogMemberExtVisible" width="50%">
    <div v-loading="memberDataLoading" style="height:300px;overflow-y:auto;">
      <el-form ref="memberExtForm" :model="memberExtData" :rules="rules" :disabled="dialogMemberExtDisabled"
               label-width="120px" size="mini" style="margin-right: 30px;">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="memberExtData.name"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone" :rules="[{required: true, trigger: 'blur', validator: validPhone}]">
            <el-input v-model="memberExtData.phone"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="memberExtData.sex" placeholder="请选择">
              <el-option v-for="item in optionData.sex" :key="item.value" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份证" prop="idcard">
            <el-input v-model="memberExtData.idcard"></el-input>
          </el-form-item>
          <el-form-item label="岗位">
            <el-input v-model="memberExtData.position"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="memberExtData.workStatus" placeholder="请选择">
              <el-option v-for="item in optionData.work_status" :key="item.key" :label="item.name" :value="item.key">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="员工编号">
            <el-input v-model.number="memberExtData.memberNo"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="memberExtData.email"></el-input>
          </el-form-item>
          <el-form-item label="生日">
            <el-date-picker v-model="memberExtData.birthday" type="date" placeholder="选择日期" style="width: auto;">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="家庭地址">
            <el-input v-model="memberExtData.address"></el-input>
          </el-form-item>
          <el-form-item label="入职时间">
            <el-date-picker v-model="memberExtData.entryTime" type="date" placeholder="选择日期" style="width: auto;">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="排序(高-低)">
            <el-input-number v-model="memberExtData.sort" :min="1" :max="10000" label="描述文字"></el-input-number>
          </el-form-item>
        </el-col>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogMemberVisible = false">取 消</el-button>
      <el-button @click="dialogMemberVisible = false">重置密码</el-button>
      <el-button @click="submitEditMember" type="primary">确 定</el-button>
    </div>
  </el-dialog>

  <!--员工移至其它部门-->
  <el-dialog title="请选择目的部门：" :visible.sync="dialogMoveMemberVisible" width="30%">
    <div style="height:300px;overflow-y:auto;">
      <div>移动 [{{memberData.name}}] 至其它部门</div>
      <br/>
      <el-tree ref="moveOrgTree" node-key="id" :props="treeDefaultProps" :data="treeData" default-expand-all accordion highlight-current>
      </el-tree>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogMoveMemberVisible = false">取 消</el-button>
      <el-button @click="submitMoveMember" type="primary">确 定</el-button>
    </div>
  </el-dialog>

  <!--选择权限所属部门-->
  <el-dialog title="请选择权限所属部门（多选）：" :visible.sync="dialogSelectOfficeVisible" width="30%">
    <div style="height:300px;overflow-y:auto;">
      <el-tree ref="selectOfficeTree" node-key="id" :props="treeDefaultProps" :data="treeData"
               :default-checked-keys="selectedOfficeKeys"
               default-expand-all show-checkbox accordion check-strictly>
      </el-tree>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogSelectOfficeVisible = false">取 消</el-button>
      <el-button @click="submitSelectOffice" type="primary">确 定</el-button>
    </div>
  </el-dialog>

  <el-card class="box-card" style="margin-top: 5px;">
    <div>

      <div style="padding: 10px; background-color: #f8f8f8; font-size: 14px;">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form ref="searchForm" :model="searchForm" :rules="rules" size="mini" style="margin-right: 30px;">
            姓名：
            <el-input size="mini" style="width: 120px;" placeholder="员工姓名" v-model="searchForm.name" @keyup.enter.native="searchMember" >
            </el-input>
            <span style="padding: 0px 20px 0px 20px;">&nbsp;</span>
            电话：
            <el-input size="mini" style="width: 160px;" placeholder="员工手机号" v-model="searchForm.phone" @keyup.enter.native="searchMember" >
            </el-input>
            <span style="padding: 0px 20px 0px 20px;">&nbsp;</span>
            <el-button type="primary" size="mini" @click="searchMember">搜索</el-button>
            <el-button type="primary" size="mini" @click="resetSearch">重置</el-button>
            </el-form>
          </el-col>
          <el-col :span="4">
          </el-col>
        </el-row>
      </div>


      <el-table v-loading="tableLoading" ref="orgDataTable" :data="tableData" style="width: 100%;margin-bottom: 20px;"
                :row-key="getRowKey"  border :height="tableHeight" :max-height="tableHeight" size="mini" lazy
                :load="loadTableData" default-expand-all indent="20"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="name" label="姓名" width="260" fixed="left">
          <template slot-scope="scope">
            <el-link v-if="scope.row.type == 1" type="primary" :style="getStyleByStatus(scope.row.status)" icon="el-icon-s-shop" @click="selectScope(scope.row)">
              {{scope.row.name}}
            </el-link>
            <el-link v-if="scope.row.type == 2" type="success" :style="getStyleByStatus(scope.row.status)" icon="el-icon-s-order" @click="selectScope(scope.row)">
              {{scope.row.name}}
            </el-link>
            <el-link v-if="scope.row.type == 3" type="warning" :style="getStyleByStatus(scope.row.status)" icon="el-icon-user-solid"
                     @click="selectScope(scope.row)">
              {{scope.row.name}}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" width="60">
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="60">
        </el-table-column>
        <el-table-column label="属性" width="260">
          <template slot-scope="scope">
            <el-tag size="small" v-for="tag in getAttribute(scope.row)" :type="tag.type" style="margin-right: 2px;">
                {{tag.name}}</el-tag>
          </template>
        </el-table-column>
        </el-table-column>
        <el-table-column prop="contacts" label="联系人" width="120">
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="240">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editScope(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.status > 0 && scope.row.type === 1" @click="addItem(scope.row, 2)" type="text"
                       style="color:#67c23a;"
                       size="small">添加部门
            </el-button>
            <el-button v-if="scope.row.status > 0 && scope.row.type === 2" @click="addItem(scope.row, 2)" type="text"
                       style="color:#67c23a;"
                       size="small">添加下级部门
            </el-button>
            <el-button v-if="scope.row.status > 0 && scope.row.type === 2" @click="addItem(scope.row, 3)" type="text"
                       style="color:#e6a23c;"
                       size="small">添加员工
            </el-button>
            <el-button v-if="scope.row.status > 0 && scope.row.type === 3" @click="moveMember(scope.row)" type="text"
                       style="color:#409eff;"
                       size="small">移至其他部门
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.11.1/index.js"></script>
<script src="https://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>
<script src="/js/validate.js"></script>
<script src="/js/my_util.js"></script>

<script>

  var marginHeight = 127; // 高差数

  var vm = new Vue({
    el: '#app',
    data: function () {
      return {
        tableHeight: window.innerHeight - marginHeight, // 表格高，当窗口改变大小的时候通过 pageResize 修改该值
        tableLoading: true, // 加载表格数据前显示等待画面
        tableData: [],      // 表格数据
        treeData: [],       // 树形图数据，用于“移至其它部门”功能
        roleData: [],       // 权限角色数据
        orgAllData: {},     // 所有机构数据
        searchForm:{},      // 按姓名搜索

        // 树形图中的参数配置
        treeDefaultProps: {
          children: 'children',
          label: 'name'
        },

        selectedOfficeKeys:[1,2,3,4],   // 選中的部門參數
        dialogCompanyVisible: false,    // 是否显示公司信息对话框
        dialogCompanyDisabled: false,   // 公司信息对话框是否禁止编辑
        dialogOfficeVisible: false,     // 是否显示部门信息对话框
        dialogOfficeDisabled: false,    // 部门信息对话框是否禁止编辑
        dialogMemberVisible: false,     // 是否显示员工信息对话框
        dialogMemberDisabled: false,    // 员工信息对话框是否禁止编辑
        dialogMemberExtVisible: false,  // 是否显示员工扩展信息对话框
        dialogMemberExtDisabled: false, // 员工扩展信息对话框是否禁止编辑
        memberDataLoading: true,        // 读取员工信息前显示等待画面
        dialogMoveMemberVisible: false, // 是否显示“移动员工至其他部门”对话框
        dialogSelectOfficeVisible:false,// 是否显示“选择权限所属部门”对话框
        companyData: {},      // 公司对话框中的数据
        officeData: {},       // 部门对话框中的数据
        memberData: {},       // 员工对话框中的数据
        memberExtData: {},    // 员工对话框中的数据
        treeMaps: new Map(),  // 保存懒加载的参数


        // 表单中的数据验证规则
        rules: {
          name: [
            {required: true, trigger: 'blur', message: '该值不能为空'},
            {min: 2, max: 20, trigger: 'blur', message: '长度在 2 到 20 个字符'}
          ],
          phone: [
            {required: false, trigger: 'blur', validator: validPhone} // 判断手机号码格式是否正确（非必填）
          ],
          idcard: [
            {required: false, trigger: 'blur', validator: validIdCard} // 判断身份证号码是否正确（非必填）
          ],
          email: [
            {required: false, trigger: 'blur', validator: validEmail} // 判断Email地址是否正确（非必填）
          ]
        },


        // 用于树形表格中的 row_key
        getRowKey(row) {
          return row.id;
        },

        // 格式化表格中的属性内容
        getAttribute(row) {
          let tags = [];
          if (row.type == 1) {
            tags.push({"name": "公司", "type": ""});
          } else if (row.type == 2) {
            tags.push({"name": "部门", "type": "success"});
          } else if (row.type == 3) {

            if (typeof row.roles != "string") {
              row.roles.forEach(v => {
                this.roleData.forEach(obj => {
                  if (obj.id == v) {
                    tags.push({"name": obj.name, "type": "warning"});
                  }
                })
              })
            }

          }

          if(row.status == 0){
            tags.push({"name": "停用", "type": "info"});
          } else if(row.status < 0){
            tags.push({"name": "已删除", "type": "info"});
          }

          return tags;
        }
      }
    },
    computed: {
      // 从缓存中读取
      optionData: function () {
        let optionDataStr = sessionStorage.getItem('optionData');
        return JSON.parse(optionDataStr || "{}");
      },

    },
    mounted() {
      // 当窗口大小发生改变的时候系统自动调用
      window.onresize = () => {
        this.pageResize();
      }
    },
    methods: {
      // 改变表格高度
      pageResize() {
        this.tableHeight = window.innerHeight - marginHeight;
      },

      // 重置表单
      resetForm(formName) {
        if (this.$refs[formName] !== undefined) {
          this.$refs[formName].resetFields();
        }
      },

      // 根据状态给出样式，
      getStyleByStatus : function(status) {
        if(status > 0){
          return {}
        } else if(status == 0){
          return {
            color:"#aaa"
          }
        } else if(status < 0){
          return {
            color:"#aaa",
            textDecoration:"line-through"
          }
        }
      },

      // 树形表格中加载数据的方法
      loadTableData(tree, treeNode, resolve) {
        // 保存懒加载的参数
        const pid = tree.id;
        this.treeMaps.set(pid, {tree, treeNode, resolve})

        // 获取下级数据
        axios.get('/admin/sys/' + tree.id + '/show/sys_organ.bu')
          .then(function (response) {
            if (response.data.code > 0) {

              // 把权限roles字符串转成int数组
              response.data.bundle.forEach(item => {
                item.roles = strToIntArray(item.roles);
              });

              resolve(response.data.bundle);
            } else if (response.data.code == 0) {
              resolve([]);
              tree.hasChildren = false;
            } else {
              vm.$message.error(response.data.msg);
            }
          })
          .catch(function (error) {
            vm.$message.error('获取数据失败！' + error);
          })
      },

      // 树形图加载下级数据
      loadTreeData(node, resolve) {
        // 获取下级数据
        let id = node.data != undefined ? node.data.id : 0
        axios.get('/admin/sys/' + id + '/show/sys_organ!no_member.bu')
          .then(function (response) {
            if (response.data.code > 0) {

              // 把权限roles字符串转成int数组
              response.data.bundle.forEach(item => {
                item.roles = strToIntArray(item.roles);
              });

              resolve(response.data.bundle);
            } else if (response.data.code == 0) {
              resolve([]);
            } else {
              vm.$message.error(response.data.msg);
            }
          })
          .catch(function (error) {
            vm.$message.error('获取数据失败！' + error);
          })
      },

      // 重新加载父级树列表
      reloadTree(pid) {
        if (this.treeMaps.has(pid)) {
          const {tree, treeNode, resolve} = this.treeMaps.get(pid)
          this.$set(this.$refs.orgDataTable.store.states.lazyTreeNodeMap, pid, [])
          this.loadTableData(tree, treeNode, resolve);
        }
      },

      // 添加项目（部门，员工）
      addItem(row, type) {
        if (type === 2) {
          // 添加部门
          this.resetForm('officeForm'); // 重置表单数据
          this.officeData = {};
          this.officeData.type = 2;
          this.officeData.pid = row.id;
          if (row.type === 1) {
            this.officeData.tid = row.id; // 最顶级ID
          } else if (row.type == 2) {
            this.officeData.tid = row.tid; // 最顶级ID
          }
          this.officeData.status = 1;
          this.dialogOfficeVisible = true;
          this.dialogOfficeDisabled = false;
          this.officeDataLoading = false;
        } else if (type === 3) {
          // 添加员工
          this.resetForm('memberForm'); // 重置表单数据
          this.memberData = {};
          this.memberData.type = 3;
          this.memberData.pid = row.id;
          if (row.type === 1) {
            this.memberData.tid = row.id; // 最顶级ID
          } else if (row.type == 2) {
            this.memberData.tid = row.tid; // 最顶级ID
          }
          //this.memberData.roles = new Array(1,2,3);
          this.memberData.status = 1;
          this.dialogMemberVisible = true;
          this.dialogMemberDisabled = false;
          this.memberDataLoading = false;
        }
      },

      // 点击“移动员工至其他部门”按钮调用
      moveMember(row) {
        this.memberData = JSON.parse(JSON.stringify(row));
        this.dialogMoveMemberVisible = true;
      },

      // 提交“移动员工至其他部门”事件
      submitMoveMember() {

        let currentNode = this.$refs.moveOrgTree.getCurrentNode()
        if (currentNode != null && currentNode != undefined) {
          let data = {}
          data.memberId = this.memberData.id;
          data.tagOfficeId = currentNode.id;

          axios.post('/admin/sys/edit/sys_organ!move_member.bu', data)
            .then(function (response) {
              if (response.data.code > 0) {
                vm.$message.success(response.data.msg);
                vm.dialogMoveMemberVisible = false;

                // 重新加载父级树列表
                vm.reloadTree(vm.memberData.pid);
                vm.reloadTree(currentNode.id);

              } else {
                vm.$message.error(response.data.msg);
              }
            })
            .catch(function (error) {
              console.log(error);
              vm.$message.error('出错：' + error);
            });
        } else {
          vm.$message.error("请选择目的地部门");
        }
      },

      // 显示选择权限所属部门调用的方法
      showSelectOfficeDialog(){
        let selectedKeys = strToIntArray(this.memberData.roles_office_list);
        console.log(selectedKeys);
        if(this.$refs.selectOfficeTree){
          console.log("通过 setCheckedKeys 设置勾选状态");
          this.$refs.selectOfficeTree.setCheckedKeys(selectedKeys);
        } else {
          console.log("通过 默认值 设置勾选状态");
          this.selectedOfficeKeys = selectedKeys;
        }
        this.dialogSelectOfficeVisible = true;
      },

      // 提交权限所属部门的选择
      submitSelectOffice() {
        let checkedArry = this.$refs.selectOfficeTree.getCheckedKeys();
        this.memberData.roles_office_list = arrayToStr(checkedArry, ',');
        this.dialogSelectOfficeVisible = false;
        console.log(checkedArry);
      },

      // 显示对象（公司，部门，员工）对话框。禁止编辑
      selectScope(row) {
        //this.$refs.orgDataTable.toggleRowExpansion(row); // 展开指定行
        if (row.type === 1) {
          this.resetForm('companyForm');
          this.dialogCompanyVisible = true;
          this.dialogCompanyDisabled = true;
          this.companyData = JSON.parse(JSON.stringify(row));
        } else if (row.type === 2) {
          this.resetForm('officeForm');
          this.dialogOfficeVisible = true;
          this.dialogOfficeDisabled = true;
          this.officeData = JSON.parse(JSON.stringify(row));
        } else if (row.type === 3) {
          this.resetForm('memberForm');
          this.dialogMemberVisible = true;
          this.dialogMemberDisabled = true;
          this.memberData = JSON.parse(JSON.stringify(row));
        }
      },

      // 编辑对象（公司，部门，员工）对话框，可编辑
      editScope(row) {
        if (row.type === 1) {
          this.resetForm('companyForm');
          this.dialogCompanyVisible = true;
          this.dialogCompanyDisabled = false;
          this.companyData = JSON.parse(JSON.stringify(row));
        } else if (row.type === 2) {
          this.resetForm('officeForm');
          this.dialogOfficeVisible = true;
          this.dialogOfficeDisabled = false;
          this.officeData = JSON.parse(JSON.stringify(row));
        } else if (row.type === 3) {
          this.resetForm('memberForm');
          this.dialogMemberVisible = true;
          this.dialogMemberDisabled = false;
          this.memberData = JSON.parse(JSON.stringify(row));
        }
      },

      // 提交对公司信息的修改
      submitEditCompany(e) {
        this.$refs.companyForm.validate((valid) => {
          if (valid) {
            delete this.companyData.hasChildren  // 因为数据库里没有该字段。所以需要先删除,才能确保数据保存成功
            axios.post('/admin/sys/edit/sys_organ.bu', this.companyData)
              .then(function (response) {
                if (response.data.code > 0) {
                  vm.$message.success(response.data.msg);
                  vm.dialogCompanyVisible = false;
                } else {
                  vm.$message.error(response.data.msg);
                }
              })
              .catch(function (error) {
                vm.$message.error('出错：' + error);
              });
          } else {
            vm.$message.error('错误：提交失败，请检查表单数据是否符合要求！');
            return false;
          }
        });
      },

      // 提交修改部门信息
      submitEditOffice(e) {
        this.$refs.officeForm.validate((valid) => {
          if (valid) {
            delete this.officeData.hasChildren  // 因为数据库里没有该字段。所以需要先删除,才能确保数据保存成功
            this.officeData.roles = arrayToStr(this.officeData.roles)
            axios.post('/admin/sys/edit/sys_organ.bu', this.officeData)
              .then(function (response) {
                if (response.data.code > 0) {
                  vm.$message.success(response.data.msg);
                  vm.dialogOfficeVisible = false;

                  // 重新加载父级树列表
                  vm.reloadTree(vm.officeData.pid);

                } else {
                  vm.$message.error(response.data.msg);
                }
              })
              .catch(function (error) {
                vm.$message.error('出错：' + error);
              });
          } else {
            vm.$message.error('错误：提交失败，请检查表单数据是否符合要求！');
            return false;
          }
        });
      },

      // 提交修改员工信息
      submitEditMember(e) {
        console.log(this.memberData);
        this.$refs.memberForm.validate((valid) => {
          if (valid) {
            delete this.memberData.hasChildren  // 因为数据库里没有该字段。所以需要先删除,才能确保数据保存成功
            this.memberData.roles = arrayToStr(this.memberData.roles)
            axios.post('/admin/sys/edit/sys_organ.bu', this.memberData)
              .then(function (response) {
                if (response.data.code > 0) {
                  vm.$message.success(response.data.msg);
                  vm.dialogMemberVisible = false;

                  // 重新加载父级树列表
                  vm.reloadTree(vm.memberData.pid);

                } else {
                  vm.$message.error(response.data.msg);
                }
              })
              .catch(function (error) {
                vm.$message.error('出错：' + error);
              });
          } else {
            vm.$message.error('错误：提交失败，请检查表单数据是否符合要求！');
            return false;
          }
        });
      },

      // 重置密码
      resetPassword(id) {
        axios.post('/admin/sys/' + id + '/edit/sys_organ!repassword.bu')
          .then(function (response) {
            if (response.data.code > 0) {
              vm.$message.success(response.data.msg);
            } else {
              vm.$message.error(response.data.msg);
            }
          })
          .catch(function (error) {
            vm.$message.error('出错：' + error);
          });
      },

      // 搜索员工
      searchMember(){
        vm.tableLoading = true;

        let data = {type:3}
        if( isNoNull(this.searchForm.name) ) {
          data["name"] = this.searchForm.name;
        }
        if( isNoNull(this.searchForm.phone) ){
          data["phone"] = this.searchForm.phone;
        }

        //
        this.$refs.orgDataTable.store.states.lazyTreeNodeMap = {}

        axios.post('/admin/sys/show/sys_organ!search_member.bu', data)
          .then(function (response) {
            if (response.data.code > 0) {
              console.log(response.data.bundle);
              vm.tableData = response.data.bundle;
              vm.tableLoading = false;
            } else {
              vm.$message.error(response.data.msg);
              vm.tableData = [];
              vm.tableLoading = false;
            }
          })
          .catch(function (error) {
            vm.$message.error('出错：' + error);
          });
      },

      // 重置搜索表单
      resetSearch(){
        // 重新加载父级树列表
        this.$refs.orgDataTable.store.states.lazyTreeNodeMap = {}
        this.searchForm = {};
        loadSysOrganData();
      }
    },
  });

  // 获取组织机构数据
  function loadSysOrganData(){
    // 获取组织机构数据
    axios.get('/admin/sys/0/show/sys_organ.bu')
      .then(function (response) {
        console.log(response.data);
        if (response.data.code > 0) {
          vm.tableData = response.data.bundle;
          vm.tableLoading = false;
        } else if (response.data.code == 0) {
          vm.$message.error("没有数据");
        } else {
          vm.$message.error(response.data.msg);
        }
      })
      .catch(function (error) {
        vm.$message.error('获取数据失败！' + error);
      });
  }

  // 默认执行，获取组织机构数据等。
  function loadInitData() {

    // 获取“移至其它部门”需要的树形图数据
    axios.get('/admin/sys/show/sys_organ!office_tree.bu')
      .then(function (response) {
        if (response.data.code > 0) {
          vm.treeData = response.data.bundle;
        } else if (response.data.code == 0) {
          vm.$message.error("没有数据");
        } else {
          vm.$message.error(response.data.msg);
        }
      })
      .catch(function (error) {
        vm.$message.error('获取数据失败！' + error);
      });

    // 获取角色数据
    axios.get('/admin/base/show/sys_role!all.bu')
      .then(function (response) {
        if (response.data.code > 0) {
          vm.roleData = response.data.bundle;
        } else {
          vm.$message.error(response.data.msg);
        }
      })
      .catch(function (error) {
        vm.$message.error('获取数据失败！' + error);
      });

    // 获取所有机构数据
    axios.get('/admin/sys/get_all_org_map.bu')
      .then(function (response) {
        if (response.data.code > 0) {
          vm.orgAllData = response.data.bundle;
        } else {
          vm.$message.error(response.data.msg);
        }
      })
      .catch(function (error) {
        vm.$message.error('获取数据失败！' + error);
      });

  };

  // 获取员工数据
  function getMemberData(row) {
    vm.memberDataLoading = true;
    axios.get('/data/org_member_data.json')
      .then(function (response) {
        setTimeout(function () {
          vm.memberData = response.data;
          vm.memberDataLoading = false;
        }, 1000);
      })
      .catch(function (error) {
        vm.$message.error('获取数据失败！' + error);
        vm.memberDataLoading = false;
      })
  }

  loadSysOrganData(); // 获取组织机构数据
  loadInitData();

</script>

</html>